import React, { useState } from 'react';
import CommonLayout from '../../../components/shop/common-layout';
import { Container, Row, Form, Label, Input ,Col} from 'reactstrap';
import { loginApi } from '../../../api/api';
import { toast } from "react-toastify";
import { useRouter } from 'next/router';
import Link from 'next/link';

const Login = () => {
    const router = useRouter();
    const [formData, setFormData] = useState({
        email: "",
        password: "",
    });

    const setCookie = (name, value, days) => {
        var expires = "";
        if (days) {
          var date = new Date();
          date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
          expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
      }
    // 处理表单输入变化  
    const handleInputChange = (e) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const btnOnclick = () => {
        if (formData.email == "" || formData.password == "") {
            toast.warning("Email And Password Can Not Be null.");
        }
        else {
            loginApi(formData).then(res => {
                if (res.error_code == "2000") {
                    setCookie("em", formData.email, 7);
                    setCookie("access", res.data.access_token, 7);
                    // var loginInfo = { "em": formData.email, "pw": }
                    toast.success(res.msg);
                    if (res.data) {
                        // var loginInfo = { "guid": res.data }
                        localStorage.setItem("XYCLogin", JSON.stringify(res.data)) 
                        router.push("/");
                    }
                    // sessionStorage.setItem("XYCLogin", )
                }
                else {
                    toast.warning(res.msg);
                }
            })
        }
    }


    return (
        <CommonLayout parent="home" title="login">
            <section className="login-page section-b-space">
                <Container>
                    <Row>
                        <Col lg="6">
                            <h3>Login</h3>
                            <div className="theme-card">
                                <Form className="theme-form">
                                    <div className="form-group">
                                        <Label for="email">Email</Label>
                                        <Input type="text" className="form-control" id="email" name="email" placeholder="Email" onChange={handleInputChange} invalid={(formData.email == "")} />
                                    </div>
                                    <div className="form-group">
                                        <Label for="review">Password</Label>
                                        <Input type="password" className="form-control" id="password" name="password" onChange={handleInputChange} invalid={(formData.password == "")}
                                            placeholder="Enter your password" required="" />
                                    </div>
                                    <a href="#" className="btn btn-solid" onClick={btnOnclick}>Login</a>
                                    <a href="/page/account/forget-pwd" className="forgot-pwd-link">Forgot your password?</a>
                                </Form>
                            </div>
                        </Col>
                        <Col lg="6" className="right-login">
                            <h3>New Customer</h3>
                            <div className="theme-card authentication-right">
                                <h6 className="title-font">Create A Account</h6>
                                <p>Sign up for a free account at our store. Registration is quick and easy. It allows you to be
                            able to order from our shop. To start shopping click register.</p>
                            <Link href={"/page/account/register"}><a href="#"
                                    className="btn btn-solid">Create an Account</a></Link>
                            </div>
                        </Col>
                    </Row>
                </Container>
            </section>
        </CommonLayout>
    )
}

export default Login;